<template>
  <div class="search">
    <div class="search-top">
      <div class="back" @click="back">
        <van-icon name="arrow-left" />
        <div class="texts">返回</div>
      </div>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>

    <Bg>
      <div v-if="Searchdata.length > 0">
        <Teadata :Searchdata="Searchdata"></Teadata>
      </div>
      <div v-else>
        <van-empty description="没有收藏" />
      </div>
    </Bg>
  </div>
</template>

<script>
import Bg from "../components/bg";
import Teadata from "../components/Teadata";
export default {
  name: "Search",
  data() {
    return {
      value: "",
      //搜索数据
      Searchdata: [],
    };
  },
  components: {
    Bg,
    Teadata,
  },
  methods: {
    //返回上一页
    back() {
      this.$router.go(-1);
    },
    onSearch() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/search",
        params: {
          appkey: this.appkey,
          name: this.value,
        },
      })
        .then((res) => {
          //   console.log("res ==> ", res);

          if (res.data.code === "Q001") {
            this.Searchdata = res.data.result;
            console.log("res ==> ", this.Searchdata);
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  .search-top {
    display: flex;
    background-color: #fff;
    .back {
      height: 55px;
      font-size: 14px;
      color: #05a1f4;
      align-items: center;
      display: flex;
      margin: 0 10px;
      .texts {
        margin-left: 5px;
      }
    }
    .van-search {
      flex: 1;
    }
  }
}
</style>